<template>

  <!-- 在el-dialog同级添加 -->
  <el-dialog v-model="renameVisible" title="重命名视频（新名称请以.mp4为后缀）" width="400px">
    <el-form :model="renameForm">
      <el-form-item label="新名称">
        <el-input v-model="renameForm.newName" autocomplete="off" label="cdcd" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="renameVisible = false">取消</el-button>
      <el-button type="primary" @click="confirmRename">确定</el-button>
    </template>
  </el-dialog>

  <div class="classroom-details-container">
    <el-container>
      <el-header class="header">
        <div class="header-content">
          <span class="header-title">班级名称：{{ classroomDetail.classroomName }}</span>
          <div class="button-group">
            <el-button disabled style="margin-right: 10px;">
              <div style="display: flex; align-items: center;">
                <span>实时消息状态: </span>
                <div class="status-indicator" :class="{ 'connected': isConnected }" style="margin-left: 5px;"></div>
                <span style="margin-left: 5px;">{{ isConnected ? '已连接' : '未连接' }}</span>
              </div>
            </el-button>
            <el-button 
              :type="isConnected ? 'warning' : 'success'" 
              @click="toggleConnection"
              class="connection-button"
            >
              {{ isConnected ? '断开实时消息' : '连接实时消息' }}
            </el-button>
            <el-button 
              type="success" 
              @click="openChatDrawer"
              class="chat-button"
            >
              打开班级群聊
            </el-button>
            <el-button class="back-button" @click="goBack" type="primary">返回</el-button>
          </div>
        </div>
      </el-header>
      <el-main class="main">
        <!-- 其他内容 -->
        <!-- 表格 -->
        <page-container style="width: 100%;">
          <el-table :data="courseList" height="94%" style="width: 100%">
            <el-table-column align="center" width="100px" label="序号">
              <template #default="{ $index }">
                {{ (params.pageNum - 1) * params.pageSize + $index + 1 }}
              </template>
            </el-table-column>
            <el-table-column align="left" prop="courseName" :show-overflow-tooltip="true" label="课程名称" />
            <el-table-column align="left" prop="teacherName" :show-overflow-tooltip="true" label="教师" />
            <el-table-column align="left" prop="videoNum" :show-overflow-tooltip="true" label="视频数量" />
            <el-table-column align="left" prop="createTime" :show-overflow-tooltip="true" label="创建时间" />
            <el-table-column label="操作" align="center" width="180px">
              <template #default="{ row }">
                <el-button type="text" plain @click="goCourseDetail(row.courseId)">
                  课程详情
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="total"
            v-model:current-page="params.pageNum" v-model:page-size="params.pageSize" :page-sizes="[1,10, 20, 30]"
            @size-change="handleSizeChange" @current-change="handleCurrentChange"
            style="margin:20px 100px 20px 0; justify-content: flex-end" />
        </page-container>
      </el-main>

    </el-container>
  </div>

  <!-- 添加聊天抽屉组件 -->
  <chat-drawer
    ref="chatDrawerRef"
    :classroom-id="classroomId"
  />
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { getCourseListService } from "@/apis/course"
import { getClassroomDetailService } from "@/apis/classroom"
import { initChatWebSocket, disconnectChatWebSocket, getChatConnectionStatus } from "@/apis/chat"
import router from "@/router";
import ChatDrawer from '@/components/ChatDrawer.vue'

// 聊天相关状态
const isConnected = ref(false)
const chatDrawerRef = ref(null)

// 切换连接状态
const toggleConnection = () => {
  if (isConnected.value) {
    disconnectChatWebSocket()
    isConnected.value = false
  } else {
    if (initChatWebSocket()) {
      isConnected.value = true
    }
  }
}

// 打开聊天抽屉
const openChatDrawer = () => {
  if (chatDrawerRef.value) {
    chatDrawerRef.value.open()
  }
}

const classroomDetail = reactive({});
let classroomId = useRoute().query.classroomId;

async function getClassroomDetail() {
  const res = await getClassroomDetailService(classroomId);
  Object.assign(classroomDetail, res.data);
}

function goBack() {
  router.go(-1);
}

const params = reactive({
  pageNum: 1,
  pageSize: 10,
  classroomId: classroomId,
})
const courseList = ref([]) //题目列表
const total = ref(0)

async function getCourseList() {
  const result = await getCourseListService(params)
  courseList.value = result.rows
  total.value = result.total
}

// 分页
function handleSizeChange(newSize) {
  params.pageNum = 1
  getCourseList()
}

function handleCurrentChange(newPage) {
  getCourseList()
}

function goCourseDetail(courseId) {
  router.push(`/tims/courseDetails?classroomName=${classroomDetail.classroomName}&courseId=${courseId}&classroomId=${classroomId}`)
}

onMounted(() => {
  // 获取班级详情
  getClassroomDetail();
  
  // 获取课程列表
  getCourseList();
  
  // 初始化时检查连接状态
  const status = getChatConnectionStatus()
  isConnected.value = status.connected

  // 设置定时器定期检查连接状态
  setInterval(() => {
    const currentStatus = getChatConnectionStatus()
    isConnected.value = currentStatus.connected
  }, 5000)
});
</script>

<style lang="scss" scoped>
.classroom-details-container {
  background-color: #f0f4ff;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  :deep(.el-container) {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
  }

  .header {
    height: 60px;
    display: flex;
    align-items: center;
    background-color: #007bff;
    color: white;
    padding: 0;
    margin: 0;
    flex-shrink: 0;

    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      width: 100%;

      .header-title {
        font-size: 20px;
      }

      .button-group {
        display: flex;
        align-items: center;
        gap: 10px;

        .status-indicator {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background-color: #F56C6C;
          display: inline-block;
          transition: background-color 0.3s;
        }

        .status-indicator.connected {
          background-color: #67C23A;
        }

        .connection-button {
          &.el-button--warning {
            background-color: #E6A23C;
            border-color: #E6A23C;
            color: white;
            
            &:hover {
              background-color: #E6A23C;
              border-color: #E6A23C;
              opacity: 0.8;
            }
          }
        }

        .chat-button {
          background-color: #67C23A;
          border-color: #67C23A;
          color: white;
          
          &:hover {
            background-color: #67C23A;
            border-color: #67C23A;
            opacity: 0.8;
          }
        }

        .back-button {
          margin-left: 10px;
        }
      }
    }
  }

  .main {
    display: flex;
    justify-content: center;
    padding: 10px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: calc(100vh - 60px);

    .page-container {
      height: 100%;
      width: 100%;
      max-width: 1400px;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      margin: 0;
      padding: 10px;

      .el-table {
        width: 100%;
        height: calc(100% - 70px) !important; /* 减去分页器高度 */
        border: none;

        .el-table-column {
          background-color: #f9f9f9; // Improve the table's visual appeal
        }
      }

      .el-pagination {
        margin: 20px 0;
        display: flex;
        justify-content: flex-end; // Align pagination to the right
        position: relative; // Ensure positioning works correctly

        .el-pagination__sizes {
          margin-right: 10px; // Add some space between size selector and pagination
        }
      }
    }
  }
}
</style>